<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('提幣')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="main">
				<view class="title">{{Lang.lang('幣種')}}</view>

				<view class="list">
					<view class="left">
						<view class="img">
							<image src="../../static/menu/menu12.png" mode="widthFix"></image>
						</view>
						<view class="name">{{array[type-1]}}</view>
					</view>
					<view class="arrow iconfont">&#xe6e0;</view>
				</view>
			</view>
			<view class="kuai01">
				<view class="info">
					<view class="title">{{Lang.lang('餘額')}}</view>
					<view class="thin01">{{Lang.lang('可用餘額')}}：
						<span v-if="type==1">{{coin_info.USDT.money}} USDT</span>
						<span v-if="type==2">{{coin_info.YYDM.money}} YYDM</span>
					</view>
				</view>
				<view class="content">
					<input type="text" v-model="value" @input="getAmount" />
					<view class="youb">
						<view class="b02">
							<span v-if="type==1">| USDT</span>
							<span v-if="type==2">| YYDM</span>
						</view>
					</view>
				</view>
			</view>
			<view class="kuai01">
				<view class="info">
					<view class="title">{{Lang.lang('交易密碼')}}</view>
					<view class="thin"></view>
				</view>
				<view class="content">
					<input type="password" v-model="pay_password" :placeholder="Lang.lang('請輸入交易密碼')" />
				</view>
			</view>

			<view class="list_box">
				<view class="w01">
					<view>{{Lang.lang('手續費')}}({{dq_info.commission}}%)</view>
					<view>{{Lang.lang('實際到賬')}}</view>

				</view>
				<view class="w02">
					<view>
						<span>{{commission_num}}</span>
						<span v-if="type==1">USDT</span>
						<span v-if="type==2">YYDM</span>
					</view>
					<view>
						<span>{{real_num}}</span>
						<span v-if="type==1">USDT</span>
						<span v-if="type==2">YYDM</span>
					</view>
				</view>
			</view>

		</view>


		<view class="confirm02" @tap="withdrawal">{{Lang.lang('提交')}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				index: 0,
				array: ['USDT', 'YYDM'],
				Text: 0,
				langIndex: '',
				pay_password: '',
				value: 0,
				type: 0,
				bsc_info: {},
				coin_info: {
					USDT: {},
					YYDM: {}
				},
				dq_info: {
					commission: 0,
					contract_address: '',
					money: '',
					withdrawal_min_num: 0,
				},
				commission_num: 0,
				real_num: 0,
			}
		},
		onLoad(options) {
			this.type = options.type || 0
			this.loadData();
		},
		onShow() {
			// let that = this;
			//that.loadData();
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._post('api/user/getBscConfig', {}, res => {
					if (res.code == 200) {
						that.bsc_info = res.data.bsc_info
						that.coin_info = res.data.coin_info
						that.setDqInfo()
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			setDqInfo() {
				if (this.type == 1) {
					this.dq_info = this.coin_info.USDT
				} else {
					this.dq_info = this.coin_info.YYDM
				}
			},
			getAmount() {
				this.commission_num = (this.value * this.dq_info.commission / 100).toFixed(6)
				this.real_num = (this.value - this.commission_num).toFixed(6)
			},
			withdrawal() {
				let that = this;
				that.Net._get('api/wallet/withdrawal', {
					num: that.value,
					type: that.array[that.type - 1],
					pay_password: that.pay_password
				}, res => {
					if (res.code == 200) {
						that.Msg.Success(res.msg)
						that.pay_password = '';
						that.value = 0
						setTimeout(function() {
							that.loadData()
						}, 500)
					}
				});
			}
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.main {
		width: 100%;
		margin: auto;
		margin-top: 4%;
	}

	.main .title {
		color: #fff;
		font-size: 3.5vw;
		font-weight: bold;
		margin-bottom: 3vw;
	}

	.main .list {
		background-color: #F9F9F9;
		height: 14vw;
		line-height: 14vw;
		display: flex;
		justify-content: space-between;
		padding: 0vw 3vw;
		border-radius: 2vw;
		margin-bottom: 3vw;
	}

	.main .list .left {
		display: flex;
	}

	.main .list .img {
		width: 7vw;
		margin-top: 2vw;
	}

	.main .list .img image {
		width: 100%;
	}

	.main .list .huo {
		color: #0ef0ec;
		font-size: 7vw;
	}

	.main .list .name {
		color: #000;
		font-size: 4vw;
		margin-left: 3vw;
	}

	.main .list .arrow {
		color: #929292;
		font-size: 4vw;
	}

	.yzm {
		text-align: right;
		line-height: 30px;
		height: 30px;
		font-size: 3.5vw;
		color: #fff;
		background-color: #0155FF;
		border-radius: 10px;
		overflow: hidden;
		padding: 0vw 2vw;
		margin-top: 3vw;
	}

	.least {
		color: #fff;
		width: 90%;
		margin: auto;
		text-align: center;
		font-size: 3.5vw;
		margin-bottom: 2vw;
	}

	.kuai01 {
		width: 100%;
		margin: auto;
		margin-bottom: 3vw;
	}

	.kuai01 .info {
		display: flex;
		justify-content: space-between;
		font-size: 3.5vw;
	}

	.kuai01 .info .title {
		color: #fff;
		font-size: 3.5vw;
		font-weight: bold;
	}

	.kuai01 .info .thin {
		color: #A5A7AD;
		font-size: 3.5vw;
		font-weight: bold;
	}

	.kuai01 .info .thin01 {
		color: #F95657;
		font-size: 3.3vw;
	}

	.kuai01 .content {
		background-color: #F9F9F9;
		height: 14vw;
		line-height: 14vw;
		display: flex;
		justify-content: space-between;
		border-radius: 2vw;
		margin-top: 3vw;
	}

	.kuai01 .content input {
		height: 14vw;
		line-height: 14vw;
		font-size: 4vw;
		padding-left: 4vw;
		color: #000;
	}

	.kuai01 .content .sao {
		font-size: 4.5vw;
		padding-right: 3vw;
		color: #000;
	}

	.kuai01 .youb {
		display: flex;
		font-size: 3.5vw;
		margin-right: 3vw;
	}

	.kuai01 .youb .b01 {
		color: #A5A7AD;
	}

	.kuai01 .youb .b02 {
		color: #000;
		margin-left: 2vw;
	}

	.list_box {
		width: 100%;
		margin: auto;
		margin-bottom: 3vw;
		display: flex;
		justify-content: space-between;
		font-size: 3.5vw;
	}

	.list_box .w01 {
		color: #fff;
		line-height: 9vw;
	}

	.list_box .w02 {
		color: #F95657;
		line-height: 9vw;
		text-align: right;
	}

	.a03 {
		font-size: 3.5vw;
		color: #fff;
		width: 100%;
		margin: 7vw auto 0vw;
	}

	.a04 {
		font-size: 3.5vw;
		color: #fff;
		width: 1000%;
		margin: 2vw auto;
	}

	.btn01 {
		background: #0155FF;
		width: 92%;
		margin: auto;
		height: 12vw;
		line-height: 12vw;
		border-radius: 12vw;
		color: #fff;
		font-size: 4vw;
		text-align: center;
		margin: 8vw auto 3vw;
	}

	.confirm02 {
		width: 92%;
	}
</style>